/**
 * React 应用是由被称为 组件 的独立 UI 片段构建而成。
 * React 组件本质上是可以任意添加标签的 JavaScript 函数。
 *
 * 在 JSX 中通过大括号使用 JavaScript
 *
 * React 组件是常规的 JavaScript 函数，但 组件的名称必须以大写字母开头，否则它们将无法运行！
 *
 * 何为根组件
 *
 * 渲染树：表示单次渲染中 React 组件之间的嵌套关系。
 *
 * 模块依赖树：表示 React 应用程序中的模块依赖关系
 *    树的根节点是根模块，也称为入口文件。它通常包含根组件的模块。
 */
import reactSvg from '../assets/react.svg'

function getImageUrl(person, size) {
  return 'https://i.imgur.com/' + person.imageId + size + '.jpg'
}

export function Avatar2({ person, size }) {
  return <img className="avatar" src={getImageUrl(person, 's')} alt={person.name} width={size} height={size} />
}

function Avatar({ person, size }) {
  // 这个组件返回一个带有 src 和 alt 属性的 <img /> 标签。<img /> 写得像 HTML，但实际上是 JavaScript！
  // 这种语法被称为 JSX，它允许你在 JavaScript 中嵌入标签。
  // 你可以传递给 <img> 标签的 props 是预定义的
  setTimeout(() => {
    size = 200 //改不会影响 子组件
    console.log(size)
  })
  return <img className="avatar" src={reactSvg} alt={person.name} width={size} height={size} />
}

function Card({ children }) {
  return <div>{children}</div>
}

function Profile() {
  let size = 100

  return (
    <Card>
      <Avatar size={size} person={{ name: 1 }} />
      <Avatar2
        person={{
          name: 'Gregorio Y. Zara',
          imageId: '7vQD0fP',
        }}
      />
    </Card>
  )
}

export default function Gallery() {
  /**
   * 为什么多个 JSX 标签需要被一个父元素包裹？
   * JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，
   * 你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。
   */
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
    </section>
  )
}
